<script setup>
import { ref } from 'vue';
//ref也用于创建响应式数据的函数，ref功能更强大一些，支持 基本类型 和 引用类型（对象，数组）
// ref 函数返回的是一个 响应式数据 <对象>，对象中有 value 属性，用来 获取/ 修改 响应式数据的值

// ❌ reactive 不支持 基本类型
  const totalCount=ref(100)
  const arr=ref(['张三','李四'])
  const addPerson=()=>{
    arr.value.push('赵六')
  }
const addCount=()=>{
  console.log(totalCount);

  totalCount.value=totalCount.value+10
}
</script>
<template>
  <!-- 结构 template 中会自动解包(为了兼容以前的模板语法)，所以无需写 .value-->
  <h1>{{totalCount}}</h1>
  <button @click="totalCount++">点击+1</button>
  <button @click="totalCount=totalCount+10">点击+10</button>
  <button @click="addCount()">点击调用函数</button>
  <h2>{{ arr }}</h2>
  <button @click="arr.push('王五')" >点击加人</button>
  <button @click="addPerson()" >点击加人-调用函数</button>
</template>
<style></style>
